import React, { useState } from 'react'
import { Toast, NavBar } from 'react-vant';
import { Button, Input, Form, Dialog } from 'react-vant'
import { checkPhone } from '@/models'
import { useNavigate } from 'react-router-dom';

export default function Step1() {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    let [disabled, setDisabled] = useState('disabled')
    const onFinish = values => {
        console.log(values)
        checkPhone(values).then(res => {
            console.log(res);
            if (res.code === '200') {
                Dialog.confirm({
                    title: '提示',
                    message: '将向手机号' + values.tel + '发送验证码',
                }).then(() => {
                    navigate('/regist/step2', { state: { tel: values.tel } })
                }).catch(error => {
                    console.log('cancel')
                })
            } else {
                Dialog.confirm({
                    title: '提示',
                    message: '该手机号已注册，是否去登录？',
                }).then(() => {
                    navigate('/login')
                }).catch(error => {
                    console.log('cancel')
                })
            }
        })
    }
    const input = (val) => {
        if (/^1[3-9]\d{9}$/.test(val)) {
            setDisabled('')
        }
    }
    return (
        <div>
            <NavBar
                title="注册"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
                style={{ marginBottom: '20px', backgroundColor: '#fff', borderBottom: '1px solid #ccc' }}
            />
            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button disabled={disabled} round nativeType='submit' type='primary' block>
                            下一步
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    rules={[{ pattern: /^1[3-9]\d{9}$/, required: true, message: '请填写手机号' }]}
                    name='tel'
                    label='手机号'
                >
                    <Input placeholder='请输入手机号' onChange={input} />
                </Form.Item>
            </Form>

        </div>
    )
}
